<template>
<div>
    <div class="search">
        <img class="icon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_search.png" />
        <input type="search" class="search-text" placeholder-class="placeholder" placeholder="搜索你想听的节目" v-model="inputValue" @keyup.13="searchSubmit" @confirm="searchSubmit" />
    </div>
    <div class="searchlists" v-if="searchlists.length>0">
        <div class="allplay" @click="playall">
            <img class="icon" src="https://youyang-cdn.mdshuzhi.com/upload/icon_play all@2x.png" />播放全部
        </div>
        <scroller :on-infinite="infinite" ref="myscroller" class="con" v-if="remommendlists.length>0">
            <div>
                <div class="item" v-for="(item,index) in remommendlists" :key="index">
                    <div class="right">
                        <div class="name">
                            <div v-if="item.title" v-html="item.title"></div>
                            <!-- 外链指定页 -->
                            <router-link to v-if="item.hasVideo==1 && item.videoLink">
                                <span class="mvlook">看</span>
                            </router-link>
                        </div>
                        <div class="nums">
                            <img class="hot_icon" v-if="item.isHot==1" src="https://youyang-cdn.mdshuzhi.com/upload/tag_hot.png" />
                            {{item.playCount}}次播放
                        </div>
                        <div class="d">
                            <div v-if="item.desc" v-html="item.desc"></div>
                        </div>
                    </div>
                    <router-link :to="'/Playing?audioId='+item.id">
                        <img class="play" src="https://youyang-cdn.mdshuzhi.com/upload/icon_listen.png" />
                    </router-link>
                </div>
            </div>
        </scroller>
    </div>
    <div v-else class="noDatas">
        <div class="empty">暂无搜索结果~</div>
        <div class="recommendlists">
            <div class="title">
                <span class="n">你是不是找这些</span>
                <span class="refesh" @click="refesh">换一批</span>
            </div>
            <!-- :on-infinite上拉加载 -->
            <scroller :on-infinite="infinite" ref="myscroller" class="lists" v-if="remommendlists.length>0">
                <ul>
                    <li class="item" v-for="(item,index) in remommendlists" :key="index">
                        <div class="pic">
                            <img :src="item.imgUrl" />
                            <img class="hot_icon" v-if="item.isHot==1" src="https://youyang-cdn.mdshuzhi.com/upload/tag_hot2.png" />
                        </div>
                        <div class="right">
                            <div class="name">
                                <div v-if="item.title" v-html="item.title"></div>
                                <template v-if="item.hasVideo==1">
                                    <!-- 外链指定页 -->
                                    <template v-if="item.videoLink">
                                        <router-link to>
                                            <span class="mvlook">看</span>
                                        </router-link>
                                    </template>
                                    <!-- 小程序 -->
                                    <template wx:else>
                                        <router-link to>
                                            <span class="mvlook">看</span>
                                        </router-link>
                                    </template>
                                </template>
                            </div>
                            <div class="nums">{{item.playCount}}次播放</div>
                            <div class="d">
                                <div v-if="item.desc" v-html="item.desc"></div>
                            </div>
                        </div>
                        <router-link to>
                            <img class="play" src="https://youyang-cdn.mdshuzhi.com/upload/icon_listen.png" />
                        </router-link>
                    </li>
                    <!-- <div class="end" v-if="remommendisEnd">没有更多了~</div> -->
                </ul>
            </scroller>
        </div>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import {
    Toast
} from "mint-ui";
export default {
    name: "searchList",
    data() {
        return {
            inputValue: "",
            searchlists: [],
            page: 1,
            pageSize: 10,
            isEnd: false,
            remommendlists: [],
            remommendpage: 1,
            remommendpageSize: 10,
            remommendisEnd: false,
            focusbool: false,
            focuslists: [],
            focuspage: 1,
            focuspageSize: 10,
            focusisEnd: false,
        };
    },
    mounted() {
        this.inputValue = this.$route.query.search || "";
        this.searchlistsFn();
        window.addEventListener('mousewheel',this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
    },
    methods: {
        handleScroll(e){
          let that = this  //此this指向的是vue
          console.log(e.wheelDelta)
          if (e.wheelDelta < 0) {
              that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
          } else {
            that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
          }
        },
        searchSubmit() {
            console.log("searchSubmit");
            this.searchlists = []
            this.focuspage = 1
            this.searchlistsFn();
        },
        // 上拉加载
        infinite(done) {
            console.log("上拉加载", this.isEnd);
            setTimeout(() => {
              if (this.isEnd || this.remommendisEnd) {
                // Toast("暂无数据");
                this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
              } else {
                console.log("进行下一次加载操作");
                if(this.searchlists.length > 0){
                  this.page = this.page + 1;
                  this.searchlistsFn();
                }else{
                  this.remommendpage = this.remommendpage + 1;
                  this.remommendlistS();
                }
                done(); //进行下一次加载操作
              }
            }, 1500);
        },

        searchlistsFn() {
            controller
                .audioList({
                    keyword: this.inputValue,
                    page: this.page,
                    pageSize: this.focuspageSize,
                })
                .then((res) => {
                    console.log("searchlistsFn", res);
                    if (res.baseData.list.length > 0) {
                        for (let item of res.baseData.list) {
                            if (item.title) {
                                item.title = item.title.replace(
                                    this.inputValue,
                                    "<span class='orange'>" + this.inputValue + "</span>"
                                );
                            }
                            if (item.desc) {
                                item.desc = item.desc.replace(
                                    this.inputValue,
                                    "<span class='orange'>" + this.inputValue + "</span>"
                                );
                            }
                        }
                        this.searchlists = this.searchlists.concat(res.baseData.list);
                        this.remommendlists = this.searchlists
                        console.log(this.searchlists)
                        if (res.baseData.lastPage) {
                            this.isEnd = true;
                        }
                    }else{
                      this.remommendlistS();
                    }
                });
        },
        remommendlistS() {
            controller
                .audioList({
                    isRecommend: 1,
                    page: this.remommendpage,
                    pageSize: this.remommendpageSize,
                })
                .then((res) => {
                    console.log("searchlistsFn", res);
                    if (res.baseData.list.length > 0) {
                        this.remommendlists = this.remommendlists.concat(res.baseData.list);
                        if (res.baseData.lastPage) {
                            this.remommendisEnd = true;
                        }
                    }
                });
        },
        refesh() {
            this.remommendlists = [];
            this.remommendpage = 1;
            this.remommendpageSize = 10;
            this.remommendisEnd = false;
            this.remommendlistS();
        },
        playall() {
            for (let item of this.searchlists) {
                if (item.title) {
                    item.title = item.title.replace("<span class='orange'>","");
                    item.title = item.title.replace("</span>","");
                }
                if (item.desc) {
                    item.desc = item.desc.replace("<span class='orange'>","");
                    item.desc = item.desc.replace("</span>","");
                }
            }
            this.$store.state.songlist=this.searchlists
            console.log(this.$store.state.songlist)
            // return
            this.$router.push({
                path: "/Playing?keyword=" + this.inputValue,
            });

        },
        // 键盘回车键key.13
        searchSubmit() {
            let _SearchValue = this.inputValue;
            console.log(_SearchValue, this.inputValue);
            if (_SearchValue != "") {
                //添加搜索历史记录
                //调用API从本地缓存中获取数据
                let localStorageValue=[]
                if(localStorage.getItem("searchData") == '[]' || localStorage.getItem("searchData") == '' || !localStorage.getItem("searchData")){
                  localStorageValue = []
                }else{
                  localStorageValue = JSON.parse(localStorage.getItem("searchData"))
                }
                // let localStorageValue = JSON.parse(localStorage.getItem("searchData")) || []
                if(localStorageValue.length === 0){
                	localStorageValue.unshift(_SearchValue);
                }else{
                	const index = localStorageValue.findIndex(item => item === _SearchValue);
                	if (index > -1) {
                	  localStorageValue.splice(index, 1);
                	}
                	localStorageValue.unshift(_SearchValue);
                }
                //保存至从本地缓存
                localStorage.setItem("searchData", JSON.stringify(localStorageValue));
                this.searchlists = [];
                this.page = 1;
                this.pageSize = 10;
                this.isEnd = false;
                this.remommendlists = [];
                this.remommendpage = 1;
                this.remommendpageSize = 10;
                this.remommendisEnd = false;
                this.searchlistsFn();
            }
        },
    },
};
</script>

<style>
.orange {
  color: #E66D4D;
}
</style>

<style lang="scss" scoped>
.noDatas {
    width: 100%;
    height: 100%;
}

.search {
    padding: 24px;
    position: relative;

    .icon {
        width: 28px;
        height: 28px;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 48px;
        margin: auto;
    }

    .search-text {
        padding: 0 24px 0 77px;
        width: 100%;
        height: 64px;
        background: rgba(246, 246, 250, 1);
        border-radius: 32px;
        font-size: 28px;
        border: none;
    }
}

.searchlists {
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
    .allplay {
        padding: 32px;
        font-size: 32px;
        font-weight: 700;
        position: relative;

        .icon {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            vertical-align: middle;
            position: relative;
            top: -1px;
            display: inline-block;
        }

        &:after {
            content: "";
            display: inline-block;
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 32px;
            right: 0;
            margin: auto;
            height: 0;
            border-bottom: #f2f2f2 1px solid;
        }
    }

    .con {
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        height: calc(100vh - 140px) !important;
        /deep/ &._v-container{
          top: 220px;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          // height: auto !important;
          ._v-content{
            padding-bottom: 55px;
          }
        }

        .item {
            padding: 25px 32px;
            overflow: hidden;
            position: relative;
            height: 189px;
            box-sizing: border-box;
        }
    }

    .nums {
        color: #a8acbb;
        margin: 15px 0;
        font-size: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .name {
        color: #323232;
        font-size: 30px;
        margin-bottom: 5px;
        div{
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
    }

    .hot_icon {
        width: 28px;
        height: 28px;
        vertical-align: middle;
        display: inline-block;
        margin-right: 10px;
    }

    .d {
        width: 80%;
        color: #a8acbb;
        font-size: 26px;
        div{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:before {
            content: "简";
            width: 24px;
            height: 24px;
            margin-top: 6px;
            background: rgba(168, 172, 187, 1);
            border-radius: 4px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            line-height: 24px;
            margin-right: 10px;
            float: left;
        }
    }

    .play {
        width: 88px;
        height: 88px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 22px;
        margin: auto;
        z-index: 1;
    }
}

.empty,
.end {
    font-size: 26px;
    text-align: center;
    color: #a8acbb;
    padding: 20px 0 48px;
}

.recommendlists {
    .title {
        line-height: 35px;
        padding: 0 32px;

        .n {
            color: #323232;
            font-size: 32px;
            font-weight: 700;
        }

        .refesh {
            color: #a8acbb;
            float: right;
        }
    }

    .lists {
        min-width: 640px;
        max-width: 960px;
        margin: 0 auto;
        height: calc(100vh - 205px) !important;
        // height: auto !important;
        /deep/ &._v-container{
          top: 270px;
          bottom: 15px;
          left: 50%;
          transform: translateX(-50%);
          ._v-content{
            padding-bottom: 55px;
          }
        }

    }

    .item {
        padding: 36px 32px;
        overflow: hidden;
        position: relative;

        &:after {
            content: "";
            display: inline-block;
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 32px;
            right: 0;
            margin: auto;
            height: 0;
            border-bottom: #f2f2f2 1px solid;
        }
    }

    .hover {
        background-color: #f6f6fa;
    }

    .pic {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        overflow: hidden;
        margin-right: 20px;
        float: left;
        background-color: #eee;
        position: relative;
    }

    .hot_icon {
        width: 40px;
        height: 40px;
        display: inline-block;
        vertical-align: middle;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        margin-right: 10px;
    }

    .right {
        overflow: hidden;
    }

    .nums {
        color: #a8acbb;
        margin-bottom: 5px;
        font-size: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .name {
        color: #323232;
        font-size: 30px;
        margin-bottom: 5px;
        div{
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
    }

    .d {
				width: 80%;
        color: #a8acbb;
        font-size: 26px;
        div{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

        }
        &:before {
            content: "简";
            width: 24px;
            height: 24px;
            margin-top: 6px;
            background: rgba(168, 172, 187, 1);
            border-radius: 4px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            line-height: 24px;
            margin-right: 10px;
            float: left;
        }
    }

    .play {
        width: 88px;
        height: 88px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 22px;
        margin: auto;
        z-index: 1;
    }
}

img {
    max-width: 100%;
    max-height: 100%;
}
</style>
